<template>
  <div class='container'>
    <div>
      <el-card style="margin:10px">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col >
        <el-row type="flex" justify="start" align="middle">
          <el-col>
            <el-form :model="page" ref='page' style="margin-top:20px">
              <el-form-item label="学科名称" prop="subjectName">
                <el-input v-model="page.subjectName" style="width: 180px;"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col>
            <el-button class="filter-item" size="small" @click="resetForm">清除</el-button>
            <el-button size="small" type="primary" @click="handleFilter">搜索</el-button>
          </el-col>
        </el-row>
        </el-col>
        <!-- 右 -->
        <el-col>
        <el-button
          class="filter-item fr"
          type="primary"
          size="small"
          style="margin-left: 10px;"
          icon="el-icon-edit"
          @click="showDialog=true"
          >新增学科
        </el-button>
        </el-col>
      </el-row>
      <template>
          <el-alert
            style='margin:0 0 16px '
            :title='`数据一共${page.total}条`'
            show-icon
            :closable='false'
            >
          </el-alert>
        </template>
     <el-table
     border=""
    :data='lists'
    style="width: 100%">
    <el-table-column
      porp= "id"
      type='index'
      label="序号"
      width="60">
    </el-table-column>
    <el-table-column
      prop='subjectName'
      label="学科名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop='username'
      label="创建者"
      width="120">
    </el-table-column>
    <el-table-column
      prop='addDate'
      label="创建日期"
      width="170">
    </el-table-column>
    <el-table-column
      prop='isFrontDisplay'
      label="前台是否显示"
      :formatter="isShowFn"
    >
    </el-table-column>
    <el-table-column
    prop='twoLevelDirectory'
      label="二级目录"
      >
    </el-table-column>
    <el-table-column
      prop='tags'
      label="标签"
      >
    </el-table-column>
     <el-table-column
     prop='totals'
      label="题目数量"
      >
    </el-table-column>
    <el-table-column
      label="操作"
      width="240">
      <template slot-scope="{row}">
        <el-button size="small" type="text">学科分类</el-button>
        <el-button size="small" type="text">学科标签</el-button>
        <el-button type="text" size="small" @click="update(row.id)">修改</el-button>
        <el-button type="text" size="small" @click="remove(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-row type="flex" justify='end' align='middle' style="height:60px">
    <el-pagination
      background
      layout="prev, pager, next, sizes, jumper"
      :page-size='page.pagesize'
      :total='page.total'
      :current-page='page.page'
      @current-change='changePage'
    />
  </el-row>
  </el-card>
    </div>
    <div>
       <el-dialog :title="`${showText}学科`" :visible.sync="showDialog" @close="btnCancel">
         <el-form ref="deptForm" :model="roleForm" label-width="120px" :rules="rules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="roleForm.subjectName" style="width:80%" placeholder="请输入学科名称" />
        </el-form-item>
      </el-form>
      <el-switch
        style='left:52px'
        inactive-text="是否显示"
        v-model="roleForm.isFrontDisplay"
        active-color="#13ce66"
        inactive-color="#ff4949"
        :active-value="1"
        :inactive-value="0"
        >
      </el-switch>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnok">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, remove, update, add, detail } from '@/api/hmmm/subjects'
import moment from 'moment'
export default {
  data () {
    return {
      lists: [],
      page: {
        page: 1,
        total: 0,
        pagesize: 10
      },
      showDialog: false,
      roleForm: {
        subjectName: '',
        isFrontDisplay: 0,
        id: null
      },
      rules: {
        subjectName: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showText () {
      console.log(this.roleForm.id)
      return this.roleForm.id ? '修改' : '新增'
    }
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      const { data } = await list(this.page)
      this.lists = data.items
      this.page.total = data.counts
      console.log(this.lists)
    },
    changePage (newPage) {
      this.page.page = newPage
      this.list()
    },
    // 重置
    resetForm () {
      this.$refs.page.resetFields()
    },
    // 搜索信息
    handleFilter () {
      this.page.page = 1
      this.list(this.page)
    },
    // 格式化时间及是否前台显示
    isShowFn (row) {
      row.addDate = moment(row.addDate).format('YYYY-MM-DD HH:mm:ss')
      if (row.isFrontDisplay === 0) {
        return '否'
      } else {
        return '是'
      }
    },
    async remove (row) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示')
        await remove(row)
        this.list()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    async update (row) {
      this.roleForm.id = row
      const { data } = await detail({ id: row })
      this.roleForm.subjectName = data.subjectName
      this.roleForm.isFrontDisplay = data.isFrontDisplay
      console.log(data)
      this.showDialog = true // 为了不出现闪烁的问题 先获取数据 再弹出层
    },
    btnok () {
      this.$refs.deptForm.validate(async isOk => {
        if (isOk) {
          try {
            if (this.roleForm.id) {
              await update(this.roleForm)
            } else {
              await add(this.roleForm)
            }
            this.$message.success('添加成功')
            this.showDialog = false
            this.list()
            this.roleForm = {
              subjectName: '',
              isFrontDisplay: 0
            }
          } catch (error) {
            console.log(error)
          }
        } else {
          this.$message.error('表单验证未通过')
        }
      })
    },
    btnCancel () {
      this.roleForm = {
        subjectName: '',
        isFrontDisplay: 0,
        id: null
      }
      // 移除校验
      this.$refs.deptForm.resetFields()
      this.showDialog = false
    }
  }

}
</script>

<style scoped lang='less'>
</style>
